<template>
  <vant-form ref="form" :validate-first="true" class="page-p-l page-p-r">
    <template v-if="form.applyType==='3'">
      <vant-field
        name="uploader"
        label="车货总体轮廓图"
        :rules="[{ validator:v=>validator(v,3), message: '请上传3张照片' }]"
        class="vant-cell-l"
      >
        <template #input>
          <app-uploader v-model="form.totalImg" :max-count="3" accept=".png, .jpeg, .jpg" />
        </template>
      </vant-field>

      <vant-field
        name="uploader"
        label="护送方案"
        :rules="[{ validator:v=>validator(v,1), message: '请上传文件' }]"
        class="vant-cell-l"
      >
        <template #input>
          <app-uploader
            v-model="form.planDoc"
            :max-count="1"
            accept=".png, .jpeg, .jpg, .doc, .docx, .pdf"
          />
        </template>
      </vant-field>
    </template>

    <vant-field
      name="uploader"
      label="运输计划"
      :rules="[{ validator:v=>validator(v,1), message: '请上传文件' }]"
      class="vant-cell-l"
    >
      <template #input>
        <app-uploader
          v-model="form.key"
          :max-count="1"
          accept=".png, .jpeg, .jpg, .doc, .docx, .pdf"
        />
      </template>
    </vant-field>

    <vant-field name="uploader" label="其他" class="vant-cell-l">
      <template #input>
        <app-uploader v-model="form.other" accept=".png, .jpeg, .jpg, .doc, .docx, .pdf" />
        <!-- :max-count="maxCount" -->
      </template>
    </vant-field>

    <vant-field label :value="form.agree" :rules="[{ required:true}]">
      <template #input>
        <van-notice-bar wrapable :scrollable="false">
          <vant-radio-group v-model="form.agree" direction="horizontal">
            <vant-radio name="1" class="tip">本人承诺填写的以上材料均真实有效，如有不实，愿意承担一切法律责任。</vant-radio>
          </vant-radio-group>
        </van-notice-bar>
      </template>
    </vant-field>
  </vant-form>
</template>

<script>
import { otherInfo } from '@apis/apply'

import mixin from './mixin'
export default {
  name: 'ApplyOther',
  mixins: [mixin],
  props: {
    applyForm: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      form: this.curForm,
    }
  },
  created() {
    this.setFormVal();
    this.otherInfo()
  },
  activated() {
    const { totalLength, totalWidth, totalHeight, totalWeight } = this.applyForm.ApplyOverAll

    let applyType;
    if (
      totalLength < 20 &&
      totalWidth < 3 &&
      totalHeight < 4.2 &&
      totalWeight < 49
    ) {
      applyType = "1"
    } else if (
      totalLength > 28 ||
      totalWidth > 3.75 ||
      totalHeight > 4.5 ||
      totalWeight > 100
    ) {
      applyType = "3"
    } else {
      applyType = "2"
    }
    this.$set(this.form, 'applyType', applyType);
  },
  methods: {
    setFormVal(data = {}) {
      ['totalImg', 'planDoc', 'key', 'other'].forEach(key => {
        this.$set(this.form, key, data[key] ? data[key] : '')
      });

    },
    otherInfo() {
      otherInfo().then(res => {
        const { data = {} } = res || {};

        this.setFormVal(data);
      })
    },
    validator(val, limit = 1) {
      return val && val.length === limit
    },
    submit() {
      return Promise.resolve(this.form);
    }
  }
}
</script>

<style lang="less" scoped>
.tip {
  & /deep/ .van-radio__label {
    color: inherit;
  }
}
</style>